<template>
    <div class="content" :style="{direction: lang.rtl ? 'rtl' : 'ltr'}">
      <h3 style="text-align:center;">{{ lang.database_configuration_description }}</h3>
            <div class="row">
                <span class="col">{{ lang.supported_database_engines }}&nbsp;&nbsp;</span>
                <Select :placeholder="lang.please_select_a_database_engine" v-model="data.database" class="selector col1">
                    <Option v-for="item in dataBases" :key="item.database" :value="item.database">{{ item.database }}</Option>
                </Select>
            </div>
            <div class="row">
                <span class="col">{{ lang.jdbc_driver }}</span>
                <Input class="input-driver col1" :placeholder="lang.jdbc_driver" v-model="data.driverClass">
                    <Icon type="android-settings" :slot="start_slot"></Icon>
                </Input>
                <span class="col2">{{ lang.if_you_no_provide_jdbc_driver_then_this_is_not_required }}</span>
            </div>
            <div class="row">
                <span class="col">{{ lang.jdbc_url }}</span>
                <Input class="col1" :placeholder="lang.jdbc_url" v-model="data.jdbcUrl">
                    <Icon type="link" :slot="start_slot"></Icon>
                    <!-- <p :slot="start_slot">Fuckkkkkkkk</p> -->
                </Input>
                <span class="col2"> {{ lang.contain_database_name }}</span>
            </div>
            <template v-if="data.requiredPassword">
                <div class="row">
                    <span class="col">{{ lang.user_name }}</span>
                    <Input class="col1" :placeholder="lang.user_name" v-model="data.userName">
                        <Icon type="person" :slot="start_slot"></Icon>
                    </Input>
                </div>
                <div class="row">
                    <span class="col">{{ lang.password }}</span>
                    <Input class="col1" type="password" :placeholder="lang.password" v-model="data.password" >
                        <Icon type="person" :slot="start_slot"></Icon>
                    </Input>
                </div>
            </template>
            <div class="row">
                <span class="col">{{ lang.initial_pool_size }}</span>
                <Input class="col1" type="number" :placeholder="lang.initial_pool_size" v-model="data.initialPoolSize" >
                    <Icon type="android-settings" :slot="start_slot"></Icon>
                </Input>
            </div>
            <div class="row">
                <span class="col">{{ lang.max_pool_size }}</span>
                <Input class="col1" type="number" :placeholder="lang.max_pool_size" v-model="data.maxPoolSize" >
                    <Icon type="android-settings" :slot="start_slot"></Icon>
                </Input>
            </div>
            <div class="row">
                <span class="col">{{ lang.min_pool_size }}</span>
                <Input class="col1" type="number" :placeholder="lang.min_pool_size" v-model="data.minPoolSize" >
                    <Icon type="android-settings" :slot="start_slot"></Icon>
                </Input>
            </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { MyHttpClient, Api } from "../../../api";
import {DataBaseConfig} from "../../../Entities/DataBaseConfig"
function client() {
  return new MyHttpClient();
}

const EVENT = "CHANGE";
const DATA = "data";

export default {
  model: {
    event: EVENT,
    prop: DATA
  },
  props: {
    data: {
      required: true,
      type: Object,
      validator: DataBaseConfig.isValid
    }
  },
  data() {
    return {
      dataBases: []
      //   data: {
      //     database: "",
      //     driverClass: "",
      //     userName: "",
      //     password: "",
      //     maxPoolSize: 0,
      //     minPoolSize: 0,
      //     jdbcUrl: "",
      //     initialPoolSize: 0,
      //     requiredPassword: true
      //   }
    };
  },
  watch: {
    "data.database"(newVal, oldVal) {
      const dbConfig = this.getDataBaseConfig(newVal);
      this.data.driverClass = dbConfig.driverClass;
      this.data.requiredPassword = dbConfig.requiredPassword;
      this.data.jdbcUrl = dbConfig.jdbcUrl;
      this.changed()
    },
    "data.driverClass"(){
        this.changed()
    },
    "data.userName"(){
        this.changed()
    },
    "data.password"(){
        this.changed()
    },
    "data.maxPoolSize"(){
        this.changed()
    },
    "data.minPoolSize"(){
        this.changed()
    },
    "data.jdbcUrl"(){
        this.changed()
    },
    "data.initialPoolSize"(){
        this.changed()
    },
    "data.requiredPassword"(){
        this.changed()
    },
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    ...mapState("webServer", ["status"]),
    loadedDataBaseConfig() {
      return this.status.currentDataBase;
    },
    start_slot() {
      return this.lang.rtl ? "append" : "prepend";
    },
    end_slot() {
      return !this.lang.rtl ? "append" : "prepend";
    }
  },
  methods: {
    getDataBaseConfig(databaseName) {
      return this.dataBases.filter(item => item.database.toLowerCase() == databaseName.toLowerCase())[0];
    },
    changed() {
        this.$emit(EVENT, this.data)
    }
  },
  async created() {
    this.dataBases = (await client().get(Api.webServer.availableDataBases())).data;

    this.data.database = this.loadedDataBaseConfig.database;
    this.data.driverClass = this.loadedDataBaseConfig.driverClass;
    this.data.userName = this.loadedDataBaseConfig.userName;
    this.data.password = this.loadedDataBaseConfig.password;
    this.data.maxPoolSize = this.loadedDataBaseConfig.maxPoolSize;
    this.data.minPoolSize = this.loadedDataBaseConfig.minPoolSize;
    this.data.initialPoolSize = this.loadedDataBaseConfig.initialPoolSize;
    this.data.jdbcUrl = this.loadedDataBaseConfig.jdbcUrl;
  }
};
</script>

<style lang="scss" scoped>
$col: 150px;
$col1: 300px;
$col2: 200px;

.ivu-input-group {
  display: inline-table;
}

.content {
  overflow: auto;
  padding: 20px;
  // border: {
  //     color: #efefef;
  //     style: solid;
  //     width: 1px;
  // }
}
.col {
  display: inline-block;
  width: $col;
}
.col1 {
  width: $col1;
  &,
  input {
    direction: ltr;
  }
}
.col2 {
  color: rgb(255, 92, 92);

  margin: {
    right: 10px;
    left: 10px;
  }
}
.row {
  // border: {
  //     color: red;
  //     width: 1px;
  //     style: solid;
  // }
  margin: {
    top: 10px;
  }
}
</style>
